<template>
   <div class="app-container" ref="main">

      <el-container>
         <el-header>
            <section class="search_box clearfix"
                     :class="{'searchStatus': this.$store.state.app.sidebar.searchStatus}">
               <el-row>
                  <el-col :md="24" :lg="24" :xl="24" class="text_right">
                     <el-button @click="openDialog('create')" icon="el-icon-edit" type="primary" size="mini">添加
                     </el-button>
                  </el-col>
               </el-row>
            </section>
         </el-header>
         <el-main>
            <el-table :data="list" border fit highlight-current-row
                      :max-height="listHeight">

               <el-table-column align="center" label="序号" prop="index" width="70">
               </el-table-column>

               <el-table-column align="center" label="登录名" prop="loginId" min-width="100">
                  <template slot-scope="scope">
                     <el-button type="text" @click="openDialog('update',scope.row)" size="mini">
                        {{scope.row.loginId}}
                     </el-button>
                  </template>
               </el-table-column>

               <el-table-column align="center" label="姓名" prop="nickName" min-width="80">
               </el-table-column>

               <el-table-column align="center" label="城市" prop="cityName" min-width="80">
               </el-table-column>


               <!--<el-table-column align="center" label="操作">-->
                  <!--<template slot-scope="scope">-->
                     <!--<el-button type='danger' size="mini" @click="del(scope.row.keyId)">删除-->
                     <!--</el-button>-->
                  <!--</template>-->
               <!--</el-table-column>-->

            </el-table>
         </el-main>
         <el-footer>
            <!--翻页-->
            <div class="pagination-container">
               <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                              :current-page.sync="currentPage"
                              :page-size="listQuery.pageSize" :total="totalElements" :page-sizes="[10, 20, 50, 100]"
                              layout="total, sizes, prev, pager, next, jumper" background>
               </el-pagination>
            </div>
         </el-footer>
      </el-container>

      <!--添加弹出框-->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="70%">
         <el-form :model="temp" :rules="tempRules" ref="temp" label-width="130px"
                  v-loading="dialogFormVisibleLoading">
            <el-row class="form_box">
               <el-col :span="24">
                  <el-form-item label="登录名" prop="loginId">
                     <el-input type="text" placeholder="请输入登录名" v-model="temp.loginId"
                               size="mini"></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="24">
                  <el-form-item label="姓名" prop="nickName">
                     <el-input type="text" placeholder="请输入姓名" v-model="temp.nickName"
                               size="mini"></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="24">
                  <el-form-item label="密码" prop="password">
                     <el-input type="password" placeholder="请输入密码" v-model="temp.password"
                               size="mini"></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="24">
                  <el-form-item label="再次输入密码" prop="password2">
                     <el-input type="password" placeholder="请再次输入密码" v-model="temp.password2"
                               size="mini"></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="24">
                  <el-form-item label="城市" prop="cityId">
                     <el-select v-model="temp.cityId" filterable placeholder="请搜索" :filter-method="getCityList" size="mini" :disabled="dialogStatus === 'update'">
                        <el-option v-for="item in cityOptions" :key="item.keyId" :label="item.cityName" :value="item.keyId">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>

            </el-row>
         </el-form>





         <div slot="footer">
            <el-button v-if="dialogStatus==='create'" type="primary" @click="create(temp)"
                       size="mini" :loading="tempLoading">提 交
            </el-button>
            <el-button v-else type="primary" @click="update(temp)" size="mini" :loading="tempLoading">提 交
            </el-button>
         </div>
      </el-dialog>

   </div>
</template>

<script>
   import customerApi from "api/customer";

   export default {
      data() {
         return {
            listHeight: 0,  //动态列表高度
            totalElements: 0,   //总条数
            currentPage: 1,     //当前页
            list: null,       //列表
            tempLoading: false, //提交加载动画

            //搜索
            listQuery: {
               page: 1,
               pageSize: 10,
               loginId: "",
               nickName: "",
               cityId: ""
            },


            //添加/修改
            dialogFormVisible: false,
            textMap: {
               update: "编辑",
               create: "创建"
            },
            dialogStatus: null, //添加/修改状态
            dialogFormVisibleLoading: false, //弹出框加载动画
            temp: {
               keyId: "",
               loginId: "",
               password: "",
               password2: null,
               nickName: "",
               cityId: "",
               cityName: "",
            },
            tempRules: {
               // 验证规则
               loginName: [{required: true, message: "请填写登陆名", trigger: "blur"}],
               password: [{required: true, message: "请填写密码", trigger: "blur"}],
               cityId: [{required: true, message: "请选择城市", trigger: "change"}],
            },

            cityOptions: [],
         };
      },

      methods: {
         getCityList(val) {
            customerApi.listRank({cityName:val,rank: 2}).then(res => {
               this.cityOptions = res.data
            })
         },

         del(keyId) {
            this.$confirm("您确定删除当前数据吗？", "提示", {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning"
            }).then(() => {
               customerApi.deleteLoginUser(keyId).then(res => {
                  if (res.code === 1) {
                     this.$notify({
                        title: "成功",
                        message: "删除成功",
                        type: "success",
                        customClass: "success",
                        duration: 1500
                     });
                     this.getList();
                  } else {
                     this.$notify.error({
                        title: "错误",
                        message: res.msg,
                        customClass: "error",
                        duration: 1500
                     });
                  }
               });
            });
         },


         //提交数据清空
         resetTemp() {
            this.temp.password = "";
            this.temp.loginId = "";
            this.temp.password2 = "";
            this.temp.nickName = "";
            this.temp.cityId = "";
            this.temp.cityName = "";

            this.$nextTick(() => {
               this.$refs["temp"].clearValidate();   //对表单验证进行重置。
            });
         },

         //打开弹窗
         openDialog(dialogStatus, row) {
            this.dialogStatus = dialogStatus;
            this.dialogFormVisible = true;
            this.resetTemp();
            if (dialogStatus === "update") {
               this.temp = Object.assign(this.temp, row);
               this.temp.password2 = row.password;
            }
         },


         //添加
         create() {
            if (this.temp.password2 !== this.temp.password) {
               this.$notify.warning({
                  title: "提示",
                  message: "两次密码不一致",
                  customClass: "warning",
               });
               return
            }

            this.$refs.temp.validate(valid => {
               if (valid) {
                  this.tempLoading = true;

                  this.cityOptions.forEach(i => {
                     if (i.keyId === this.temp.cityId) {
                        this.temp.cityName = i.cityName
                     }
                  })

                  customerApi.add(this.temp).then(res => {
                     let self = this;
                     setTimeout(function () {
                        self.tempLoading = false;
                     }, 2000);
                     if (res.code === 1) {
                        this.$notify({
                           title: "成功",
                           message: "添加成功",
                           type: "success",
                           customClass: "success",
                           duration: 1500
                        });
                        this.getList();
                        this.resetTemp();
                        this.dialogFormVisible = false;
                     } else {
                        this.$notify.error({
                           title: "失败",
                           message: res.msg,
                           customClass: "error",
                           duration: 1500
                        });
                     }
                  });
               } else {
                  this.$notify.warning({
                     title: "信息不完整",
                     message: "请完整填写信息",
                     customClass: "warning",
                     duration: 1500
                  });
               }
            });
         },

         //修改
         update() {
            if (this.temp.password2 !== this.temp.password) {
               this.$notify.warning({
                  title: "提示",
                  message: "两次密码不一致",
                  customClass: "warning",
               });
               return
            }

            this.$refs.temp.validate(valid => {
               if (valid) {
                  this.tempLoading = true;
                  this.cityOptions.forEach(i => {
                     if (i.keyId === this.temp.cityId) {
                        this.temp.cityName = i.cityName
                     }
                  })
                  customerApi.update(this.temp).then(res => {
                     let self = this;
                     setTimeout(function () {
                        self.tempLoading = false;
                     }, 2000);
                     if (res.code === 1) {
                        this.$notify({
                           title: "成功",
                           message: "修改成功",
                           type: "success",
                           customClass: "success",
                           duration: 1500
                        });
                        this.getList();
                        this.resetTemp();
                        this.dialogFormVisible = false;

                     } else {
                        this.$notify.error({
                           title: "失败",
                           message: res.msg,
                           customClass: "error",
                           duration: 1500
                        });
                     }
                  });
               } else {
                  this.$notify.warning({
                     title: "信息不完整",
                     message: "请完整填写信息",
                     customClass: "warning",
                     duration: 1500,
                  });
               }
            });
         },

         //列表
         getList() {
            customerApi.pageList(this.listQuery).then(res => {
               this.list = res.data.list.map((d, i) => {
                  d.index = (this.currentPage - 1) * this.listQuery.pageSize + i + 1;
                  return d;
               });
               this.totalElements = res.data.totalElements;
            });
         },

         search() {
            this.listQuery.page = this.currentPage = 1;
            this.getList();
         },
         //控制列表显示条数
         handleSizeChange(val) {
            this.listQuery.page = 1;
            this.listQuery.pageSize = val;
            this.getList();
         },
         handleCurrentChange() {
            this.listQuery.page = this.currentPage;
            this.getList();
         },

      },

      mounted() {
         this.$nextTick(() => {
            this.listHeight = this.$refs.main.offsetHeight - 175;
            let self = this;
            window.addEventListener("resize", function () {
               self.listHeight = self.$refs.main.offsetHeight - 175;
            });
         });
      },

      created() {
         if (sessionStorage.getItem('ledaoCityId') !== '370100') {
            this.listQuery.cityId = sessionStorage.getItem('ledaoCityId')
         }

         this.getList();
         this.getCityList();
      },
   }
   ;
</script>